<template>
  <div id="dl">
    <div style="margin: auto; width: 57px">
      <van-image class="login-img" width="100%" src="/login_img/dl-logo.png" />
    </div>
    <div id="bd">
      <van-form validate-first @failed="onFailed" @submit="login">
        <van-field
          v-model="username"
          name="checkuname"
          placeholder="请输入用户名"
          :rules="[
            {
              pattern: /^[a-z0-9]{6,16}$/,
              message: '请填写6-16位字母或数字',
            },
          ]"
        />
        <van-field
          v-model="password"
          type="password"
          name="checkpwd"
          placeholder="请输入密码"
          :rules="[
            {
              pattern: /^[a-z0-9]{6,16}$/,
              message: '请填写6-16位字母或数字',
            },
          ]"
        />
        <div class="login-btn">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
        <p class="reg-forget">
          <router-link to="/register">立即注册</router-link>|<router-link to=""
            >忘记密码？</router-link
          >
        </p>
        <!-- <div @click="toRegister" class="register-btn">
          <van-button round block type="info" native-type="submit" disabled
            >注册</van-button
          >
        </div> -->
      </van-form>
    </div>

    <div id="text">
      <p>完成登录即表示您已阅读</p>
      <p>
        并同意 读者 <router-link to="/service">《服务条款》</router-link> 和
        <router-link to="/agreement">《隐私政策》</router-link>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values)
    },
    toRegister() {
      this.$router.push('/register')
    },
    login() {
      let url = 'login'
      const { username, password } = this
      let params = `uname=${username}&upwd=${password}`
      this.axios.post(url, params).then(res => {
        console.log(res)
        // document.cookie = 'id' + '=' + res.data.id
        if (res.data.code == 200) {
          sessionStorage.setItem('id', res.data.id)
          // sessionStorage.getItem('id')
          this.$toast.success(res.data.msg)
          // this.$store.commit('updateUser')
          this.$store.commit('updateUser', username)
          let id = sessionStorage.getItem('id')
          let params2 = `id=${id}`
          this.axios.post('person', params2).then(res => {
            console.log('个人详情:', res)
            this.$store.commit('updatePname', res.data.data[0].person_name)
            this.$store.commit('updateUserId', res.data.data[0].user_id)
            this.$store.commit('updateMoney', res.data.data[0].balance)
          })

          this.$router.push('/')
        } else {
          this.$toast.fail(res.data.msg)
        }
      })
    },

    // validator(val) {
    //   return /^[a-z0-9]{6,16}$/i.test(val)
    // },
    onFailed(errorInfo) {
      console.log('failed', errorInfo)
    },
  },
}
</script>
<style lang="scss" scoped>
.login-btn > button {
  background-color: #3eaf7c;
  border: 1px solid #3eaf7c;
  width: 85%;
  margin: 26px auto;
}
.register-btn > button {
  background-color: #e6f5f8;
  border: 1px solid #3eaf7c;
  width: 85%;
  margin: -10px auto 10px;
}
.van-cell {
  width: 80%;
  margin: 0 auto;
}

form {
  margin-top: 25%;
}
#dl {
  margin-top: 35%;
}
p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 22px;
  color: #999;
  text-align: center;
}
#text p a {
  color: #333;
}
#text {
  width: 270px;
  height: 44px;
  margin: 0 auto;
}
form.van-form {
  margin-top: 60px;
}
.reg-forget {
  height: 40px;
}
.reg-forget a {
  margin: 10px;
}
</style>
